<template>
	<view class="page">
		<view class="calendar">
			<view class="calendar-top" @click="calendarFlag1=!calendarFlag1">
				今日服务({{countInfo.toDaysCount}})
				<image src="@/static/down.png" mode="widthFix" v-if="calendarFlag1"></image>
				<image src="@/static/right.png" mode="widthFix" v-else></image>
			</view>
			<view class="" v-if="calendarFlag1">
				<calendar1 :item="item" v-for="(item,i) in orderList1" :key="item.id"/>
			</view>
			 
		</view>
		
		<view class="calendar">
			<view class="calendar-top" @click="showNext">
				下次服务({{countInfo.lastCount}})
				<image src="@/static/down.png" mode="widthFix" v-if="calendarFlag2"></image>
				<image src="@/static/right.png" mode="widthFix" v-else></image>
			</view>
			<view class="" v-if="calendarFlag2">
				<calendar1 :item="item" v-for="(item,i) in orderList2" :key="item.id" />
				
			</view>
			 
		</view>
		
		<view class="calendar">
			<view class="calendar-top" @click="tourl('/pages/orderCalendar/toevaluated')">
				待评价({{countInfo.uncommentedCount}})
				 
				<image src="@/static/right.png" mode="widthFix"  ></image>
			</view>
			<view class="">
				<view class="content" style="">
					<uni-calendar class="uni-calendar--hook" :selected="calendarList" :showMonth="false" @change="change" @monthSwitch="monthSwitch">
						
					</uni-calendar>
				</view>
			</view>
			
		</view>
		
		<view style="margin: 30rpx 0 50rpx;" v-if="checked">
			<wu-title :title="'当前选中日期的订单列表'"></wu-title>
			<view style="margin-top:40rpx;"> </view>
			<calendar1 :item="item" v-for="(item,i) in orderList3" :key="item.id" /> 
			<no-data v-if="orderList3.length==0 && calendarFlag3"/>
		</view>
		
	</view>
</template>

<script>
	import {getDate} from "@/utils/utils.js"
	import {getOrderPageAPI,getCalendarTimeAPI,getCalendarCountAPI} from "@/api/api.js"
	import calendar1 from "./components/calendar1.vue"
	import wuTitle from "@/components/wu-title.vue"
	export default {
		components: {calendar1,wuTitle},
		data() {
			return {
				calendarFlag1:false,
				orderList1:[],
				calendarFlag2:false,
				orderList2:[],
				calendarFlag3:false,
				orderList3:[],
				 
				orderInfo:{
					patrolOrderNumber:"123",
					factoryName:"factoryName",
					circuitName:'circuitName'
				},
			 
				countInfo:{
					lastCount: '',
					toDaysCount: '',
					uncommentedCount: ''
				},
				calendarList:[],
				checked:false
			}
		},
		onReady() {
			this.getCalendarDate()
		},
		onShow() {
			this.getcount()
		},
		created() {
			
			this.getDateOrder()
		},
		methods: {
			getcount(){
				getCalendarCountAPI().then(res=>{
					this.countInfo=res
				})
			},
			getCalendarDate(){
				getCalendarTimeAPI().then(res=>{
					this.calendarList=res.map(item=>{
						let list=[]
						if(item.isOrder){
							list.push("#277EEF")
						}
						if(item.isCancal){
							list.push("#AAAAAA")
						}
						return {
							date:item.time,
							points:list, 
						}
					})
				})
			},
			getDateOrder(type){
				var data={
					userId:uni.getStorageSync("userId"),
					type:1
				}
				getOrderPageAPI(data).then(res=>{
					this.orderList1=res
				})
			},
			change(e) {
				console.log(e)
				var data={
					userId:uni.getStorageSync("userId"),
					serviceStartTime:e.fulldate
				}
				uni.showLoading({
					title:"获取当天订单数据"
				})
				getOrderPageAPI(data).then(res=>{
					this.orderList3=res
					uni.hideLoading()
					this.checked=true
				}) 
			},
			showNext(){
				this.calendarFlag2=!this.calendarFlag2
				var data={
					userId:uni.getStorageSync("userId"),
					type:2
				}
				if(this.orderList2.length){
					return
				}
				uni.showLoading({
					title:"获取订单数据"
				})
				getOrderPageAPI(data).then(res=>{
					this.orderList2=res
					
					uni.hideLoading()
				})
			},
			confirm(e) {
				console.log('confirm 返回:', e)
			},
			monthSwitch(e) {
				console.log('monthSwitchs 返回:', e)
			}
		}
	}
</script>

<style scoped lang="scss">
.page{
	padding:20rpx;
	background-color: #F8F8F8;
	min-height: 100vh;
}
.calendar{
	background-color: #ffffff;
	margin-top: 20rpx;
	.calendar-top{
		text-align: center;
		line-height: 90rpx;
		background: #277EEF;
		border-radius: 12rpx;
		color: #ffffff;
		font-weight: bold;
		font-size: 32rpx;
		position: relative;
		image{
			width: 40rpx;
			position: absolute;
			right: 25rpx;
			top: 25rpx;
		}
	}
}

.red-dot {
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;
}

.gray-dot {
  width: 8px;
  height: 8px;
  background-color: gray;
  border-radius: 50%;
}

.dot {
  position: absolute;
  top: -4px; /* 调整位置 */
  right: 4px; /* 调整位置 */
}

</style>
